<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="user" id="user"></div>
      </el-col>
      <el-col :span="12">
        <div class="order" id="order"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="goods" id="goods"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { list } from "@/api/monitor/logininfor"
import { listOrder } from "@/api/mysystem/order"
import { listGoods } from "@/api/mysystem/goods"
import { listMessage } from "@/api/mysystem/message"
import moment from "moment"

export default {
  name: "Echarts",
  data() {
    return {
      userOption: {
        title: {
          text: "用户数据",
          left: "center",
          top: "0",
          textStyle: {
            fontSize: 20
          },
          subtextStyle: {
            fontSize: 20
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        // legend: {
        //   data: ["Evaporation", "Precipitation", "Temperature"]
        // },
        xAxis: [
          {
            type: "category",
            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月","八月","九月","十月","十一月","十二月"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "登录量",
            min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: "{value} 次"
            }
          },
        ],
        series: [
          {
            name: "登录量",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 次";
              }
            },
            data: [
              2.0,
              5.0,
              17.0,
              23.0,
              13.0,
            ]
          },
        ]
      },
      orderOption: {
        title: {
          text: "订单数据",
          left: "center",
          top: "0",
          textStyle: {
            fontSize: 20
          },
          subtextStyle: {
            fontSize: 20
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["订单量", "订单金额"],
          bottom: 0,
        },
        xAxis: [
          {
            type: "category",
            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月","八月","九月","十月","十一月","十二月"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "订单量",
            min: 0,
            // max: 50,
            // interval: 10,
            axisLabel: {
              formatter: "{value} 条"
            }
          },
          {
            type: "value",
            name: "订单金额",
            min: 0,
            // max: 2500,
            // interval: 500,
            axisLabel: {
              formatter: "{value} 元"
            }
          }
        ],
        series: [
          {
            name: "订单量",
            type: "bar",
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function(value) {
                return value + " 条";
              }
            },
            data: [
              2.0,
              4.0,
              7.0,
              23.0,
              25.0,
            ]
          },
          {
            name: "订单金额",
            type: "bar",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + " 元";
              }
            },
            data: [
              200.0,
              600.0,
              800.0,
              2500.0,
              3200.0,
            ]
          },
          
        ]
      },
      goodsOption: {
        title: {
          text: "商品数据",
          left: "center",
          top: "0",
          textStyle: {
            fontSize: 20
          },
          subtextStyle: {
            fontSize: 20
          }
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ["发布商品数", "线下交易预约数"],
          bottom: 0,
        },
        xAxis: [
          {
            type: "category",
            data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月","八月","九月","十月","十一月","十二月"],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "发布商品数",
            min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: "{value} 个"
            }
          },
          {
            type: "value",
            name: "线下交易预约数",
            min: 0,
            // max: 25,
            // interval: 5,
            axisLabel: {
              formatter: "{value} 次"
            }
          }
        ],
        series: [
          {
            name: "发布商品数",
            type: "line",
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function(value) {
                return value + " 个";
              }
            },
            data: [
              2.0,
              20.0,
              30.0,
              41.0,
              6.0,
            ]
          },
          {
            name: "线下交易预约数",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + " 次";
              }
            },
            data: [
              2.0,
              12.0,
              36.0,
              11.0,
              6.0,
              
            ]
          },
        ]
      }
    };
  },
  methods: {
    // 获取用户登录数据
    getUserData(){
      list({ pageSize: 10000 }).then((res)=>{
        console.log(res,"<<<<<<<<resUser");
        let arr = [];
        for(let i=0;i<moment().format('M');i++){
          arr[i] = 0;
        }
        // 对数据进行分析统计
        res.rows.map((item,index) => {
          // 获取登录时间数据
          arr[moment(item.loginTime).format('M')-1]++;
        });
        this.userOption.series[0].data = arr;
        this.userOption && this.myChart.setOption(this.userOption);
      })
    },
    // 获取订单数据
    getOrderData(){
      listOrder({ pageSize: 10000 }).then((res)=>{
        console.log(res,"<<<<<<<<resOrder");
        let arr = [];
        let arr2 = [];
        for(let i=0;i<moment().format('M');i++){
          arr[i] = 0;
          arr2[i] = 0;
        }
        // 对数据进行分析统计
        res.rows.map((item,index) => {
          // 获取订单时间数据
          arr[moment(item.createTime).format('M')-1]++;
          arr2[moment(item.createTime).format('M')-1] += item.orderMoney;
        });
        this.orderOption.series[0].data = arr;
        this.orderOption.series[1].data = arr2;
        this.orderOption && this.myChart2.setOption(this.orderOption);
      })
    },
    // 获取商品数据
    getGoodsData(){
      listGoods({ pageSize: 10000 }).then((res)=>{
        console.log(res,"<<<<<<<<resGoods");
        let arr = [];
        for(let i=0;i<moment().format('M');i++){
          arr[i] = 0;
        }
        // 对数据进行分析统计
        res.rows.map((item,index) => {
          // 获取商品发布时间数据
          arr[moment(item.createTime).format('M')-1]++;
        });
        this.goodsOption.series[0].data = arr;
        this.goodsOption && this.myChart3.setOption(this.goodsOption);
      })
      listMessage({ pageSize: 10000 }).then((res)=>{
        console.log(res,"<<<<<<<<resMessage");
        let arr = [];
        for(let i=0;i<moment().format('M');i++){
          arr[i] = 0;
        }
        // 对数据进行分析统计
        res.rows.map((item,index) => {
          // 获取预约时间数据
          if(item.type==0){
            arr[moment(item.createTime).format('M')-1]++;
          }
        });
        this.goodsOption.series[1].data = arr;
        this.goodsOption && this.myChart3.setOption(this.goodsOption);
      })

    }
  },
  mounted() {
    
    this.chartDom = document.getElementById("user");
    this.myChart = echarts.init(this.chartDom);
    this.getUserData();


    this.chartDom2 = document.getElementById("order");
    this.myChart2 = echarts.init(this.chartDom2);
    this.getOrderData();


    this.chartDom3 = document.getElementById("goods");
    this.myChart3 = echarts.init(this.chartDom3);
    this.getGoodsData();
    // this.goodsOption && myChart3.setOption(this.goodsOption);
  }
};
</script>

<style lang="scss" scoped>
.user {
  width: 600px;
  height: 50vh;
}
.order {
  width: 600px;
  height: 50vh;
}
.goods {
  width: 100%;
  height: 50vh;
}
</style>>
